@import './style.scss';

.th {
  @include cell;
  background-color: #f2f3f5;
  color: rgb(29,33,41);
  font-weight: 500;
  position: relative;

  .sorter {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    width: 24px;
    height: 100%;
    color: #c9cdd4;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .active {
      color: #165dff;
    }

    &:hover {
      background-color: #e9eaec;
      cursor: pointer;
    }
  }

  &.fixedRight,
  &.fixedLeft {
    position: sticky;
    z-index: 10;
  }

  &.fixedLeft.first {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: -1px;
      width: 10px;
      pointer-events: none;
      transform: translateX(100%);
      transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1);
      box-shadow: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);
    }
  }

  &.fixedRight.first {
    &::after {
      box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: -1px;
      width: 10px;
      pointer-events: none;
      transform: translateX(-100%);
      transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1);
    }
  }
}
